import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { colors } from '@/utils/marketingMap/utils';

echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);

const CircularChart: React.FC<any> = ({ data, toStore }) => {
  const chartRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (chartRef.current && data) {
      const chartInstance = echarts.init(chartRef.current);
      const values = data?.map((item: { data: any[] }) =>
        item?.data?.reduce((cur, prev) => (cur += prev.value), 0),
      );
      const series = [
        {
          name: 'q',
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['25%', '40%'],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter:
                '{total|' + (values?.[0] || 0) + '}' + '\n\r' + '{active|' + '我的售后店' + '}',
              rich: {
                total: {
                  fontSize: 18,
                  color: '#000',
                  lineHeight: 24,
                },
                active: {
                  fontSize: 14,
                  color: '#9a9a9a',
                  lineHeight: 20,
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
        },
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['75%', '40%'],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            normal: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter:
                '{total|' +
                (values?.[1] || 0) +
                '}' +
                '\n\r' +
                '{active|' +
                (toStore.length < 4 ? toStore : toStore.slice(0, 4) + '...') +
                '}',
              rich: {
                total: {
                  fontSize: 18,
                  color: '#000',
                  lineHeight: 24,
                },
                active: {
                  fontSize: 14,
                  color: '#9a9a9a',
                  lineHeight: 20,
                },
              },
            },
            emphasis: {
              show: true,
            },
          },
        },
      ];

      const option = {
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: ({ seriesName, marker, name, value, percent }: any) => {
            return `
              <div>
                <div>${seriesName}</div>
                <div style="display: flex; gap: 20px"> 
                  <span>${marker} ${name}：${Math.round(percent)}%</span>
                  <span>${value}次</span>
                </div>
              </div>
            `;
          },
        },
        color: colors,
        legend: {
          // type: 'scroll',
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          pageIconSize: 8,
          bottom: 0,
        },
        series: series.map((item, index) => ({
          ...item,
          ...data[index],
        })),
      };
      chartInstance.setOption(option);

      return () => {
        chartInstance.dispose();
      };
    }

    return;
  }, [chartRef.current]);

  return <div ref={chartRef} style={{ width: 540, height: 200 }} />;
};

export default CircularChart;
